<template>
  <div>
    Parent---<br />
    <!-- 家是蓝色,公司是绿色 -->
    <my-table :data="list" :name="name" @change="changeName">
      <template #default="scope">
        <!-- scope.row 拿到的才是子组件中传递过来的那一行值 -->
        <span :style="{ color: scope.row.tag === '家' ? 'blue' : 'green' }">{{
          scope.row.tag
        }}</span>
      </template>
    </my-table>
    <br />
    <!-- 家是红色,公司是蓝色 -->
    <!-- 
    <my-table :data="list">
      <template #default="scope">
        scope.row 拿到的才是子组件中传递过来的那一行值 
        <span :style="{ color: scope.row.tag === '家' ? 'red' : 'blue' }">{{
          scope.row.tag
        }}</span>
      </template>
    </my-table>
    -->
    <br />
    <!-- 家是pink,公司是紫色 -->
    <!-- 
    <my-table :data="list">
      <template #default="scope">
        scope.row 拿到的才是子组件中传递过来的那一行值 
        <span :style="{ color: scope.row.tag === '家' ? 'pink' : 'purple' }">{{
          scope.row.tag
        }}</span>
      </template>
    </my-table>
    -->
  </div>
</template>

<script>
import MyTable from './MyTable'
export default {
  components: {
    MyTable
  },
  data () {
    return {
      name: '张三丰',
      list: [
        {
          id: 1001,
          name: '王语嫣',
          date: '1096',
          address: '美人岛',
          tag: '家'
        },
        {
          id: 1002,
          name: '慕容复',
          date: '1097',
          address: '大燕',
          tag: '公司'
        },
        {
          id: 1003,
          name: '黄药师',
          date: '1066',
          address: '桃花岛',
          tag: '家'
        },
        { id: 1004, name: '郭靖', date: '1077', address: '襄阳', tag: '公司' }
      ]
    }
  },
  methods: {
    changeName (name) {
      this.name = name
    }
  }
}
</script>
